<template>
  <div class="login_container">
    <div class="gohome" @click="gohome()">返回</div>
    <div class="top_title">
      <div class="top_title-son" @click="tab('1')">账号注册</div>
      <div class="top_title-son" @click="tab('2')">账号编辑</div>
    </div>
    <div class="login_box" v-show="tabnow === '1'">
      <el-form
        :model="ruleForm"
        autocomplete="off"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm.password"></el-input>
        </el-form-item>

        <!-- <el-form-item label="姓名" prop="age">
          <el-input v-model="ruleForm.nickName"></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="login_box2" v-show="tabnow === '2'">
      <div class="login_box2-son">
        <el-table class="" :data="tableData" border style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="100px"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="username"
            label="账号"
            width="auto"
            align="center"
          >
          </el-table-column>
          <!-- <el-table-column
            prop="nickName"
            label="姓名"
            width="auto"
            align="center"
          >
          </el-table-column> -->

          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >删除</el-button
              >
              <el-button type="text" size="small" @click="editClick(scope.row)"
                >编辑</el-button
              >
              <el-button type="text" size="small" @click="qxpzClick(scope.row)"
                >权限配置</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog
      title="修改密码"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <div>
        <span>账号</span>
        <el-input
          class="aatitle"
          v-model="editdata.username"
          placeholder="请输入内容"
        ></el-input>
      </div>

      <div class="aatitle-son">
        <span>旧密码</span>
        <el-input
          class="aatitle"
          v-model="editdata.oldPassword"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="aatitle-son">
        <span>新密码</span>
        <el-input
          class="aatitle"
          v-model="editdata.newPassword"
          placeholder="请输入内容"
        ></el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editsubmit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="权限配置"
      :visible.sync="qxpzDialogVisible"
      width="30%"
      center
    >
      <div>
        <span>权限配置：</span>
        <el-select
          v-model="querydata.menuIds"
          @change="qxpzchange($event)"
          placeholder="请选择"
          style="width: 80%"
          multiple
        >
          <el-option
            v-for="item in qxpzoptions"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <!-- <el-input
          class="aatitle"
          v-model="qxpzdata.username"
          placeholder="请输入内容"
        ></el-input> -->
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="qxpzDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="qxpzsubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    // var checkAge = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("姓名不能为空"));
    //   } else {
    //     callback();
    //   }
    // };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        nickName: null,
        password: null,
        username: null,
      },
      tabnow: "1",
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        username: [{ validator: validatePass2, trigger: "blur" }],
        // age: [{ validator: checkAge, trigger: "blur" }],
      },

      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
      centerDialogVisible: false,
      qxpzDialogVisible: false,
      editdata: {
        newPassword: null,
        oldPassword: null,
        username: null,
      },
      qxpzdata: {},
      qxpzoptions: [],

      querydata: {
        adminId: 0,
        menuIds: [],
      },
    };
  },
  watch: {},
  created() {
    this.initdata();
    this.listInfolist();
  },
  methods: {
    gohome() {
      this.$router.push({ path: "/home" });
    },
    tab(val) {
      this.tabnow = val;
    },
    handleClick(val) {
      this.$confirm("是否删除此账号", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteldata(val.id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    editClick(val) {
      // console.log(val);
      this.centerDialogVisible = true;
      // updatePassword
      // const registerlist = await this.$http.post("admin/updatePassword", { "newPassword":val.password,});
      // this.tableData = registerlist.data.data.list;
    },
    // /menu/listInfo
    qxpzClick(val) {
      this.qxpzDialogVisible = true;
      // console.log(val)
      this.querydata.adminId = val.id;
      // const editlist = await this.$http.post(
      //   "/menu/listInfo",
      //   this.editdata
      // );
      // console.log(editlist);
    },
    editsubmit() {
      this.editdatafunc();
      // this.centerDialogVisible = false;
    },
    async editdatafunc() {
      const editlist = await this.$http.post(
        "admin/updatePassword",
        this.editdata
      );
      console.log(editlist);
      if (editlist.data.code == 200) {
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.centerDialogVisible = false;
        this.editdata = {
          newPassword: null,
          oldPassword: null,
          username: null,
        };
        this.initdata();
      } else {
        this.$message.error("修改失败联系后端管理员");
      }
    },
    async initdata() {
      const formData = new FormData();
      formData.append("pageNum", 1);
      formData.append("pageSize", 100);
      const registerlist = await this.$http.post("admin/list", formData);
      this.tableData = registerlist.data.data.list;
      // console.log(registerlist.data.data.list);
    },
    async deleteldata(id) {
      const deletellist = await this.$http.post("admin/delete/" + id);
      // console.log(deletellist);
      if (deletellist.data.code == 200) {
        this.initdata();
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const registerdata = await this.$http.post(
            "admin/register",
            this.ruleForm
          );
          if (registerdata.data.code == 200) {
            this.$message({
              message: "注册成功",
              type: "success",
            });
            this.ruleForm = {
              nickName: null,
              password: null,
              username: null,
            };
            this.initdata();
          } else {
            this.$message.error("提交失败联系后端管理员");
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      // this.$refs[formName].resetFields();
      this.ruleForm = {
        nickName: null,
        password: null,
        username: null,
      };
    },

    async listInfolist() {
      const qxpzlist = await this.$http.post("/menu/listInfo", null);
      // console.log(qxpzlist, "5678");
      if (qxpzlist.data.code == 200) {
        this.qxpzoptions = qxpzlist.data.data;
        // console.log(this.qxpzoptions, "5678");
      }
    },
    qxpzchange(val) {
      console.log(val);
      // this.querydata.menuIds = [];
    },
    async qxpzsubmit() {
      // console.log(this.querydata);
      const sublist = await this.$http.post(
        "/admin/adminMenuBind",
        this.querydata
      );
      console.log(sublist);
      if (sublist.data.code == 200) {
        console.log(sublist);
        this.$message({
          message: "配置成功",
          type: "success",
        });
        this.querydata.menuIds = [];
        this.qxpzDialogVisible = false;
      } else {
        this.$message({
          message: "配置失败，请稍等",
        });
        return false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.login_container {
  height: 100vh;
  background: url("../assets//img/tab-bj.jpg") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}
.login_box {
  width: 8rem;
  height: 6rem;
  background: url("../assets/img/login-border.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}
.login_box2 {
  // background: red;
  padding: 0.3rem;
  box-sizing: border-box;
  width: 100%;
  height: 80%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);

  .login_box2-son {
    // background: red;
    height: 100%;
    overflow: auto;
  }
}
.el-form-item {
  margin-bottom: 50px;
}
.demo-ruleForm {
  margin-top: 0.5rem;
  padding: 0.3rem;
  position: absolute;
  width: 80%;
  top: 50%;
  transform: translateY(-50%);
}
/deep/.el-form-item__label {
  color: #fff;
}
.top_title {
  width: 200px;
  position: absolute;
  left: 50%;
  height: 40px;
  transform: translate(-50%);
  .top_title-son {
    width: 80px;
    float: left;
    height: 100%;
    background: #3451a1;
    cursor: pointer;
    margin-left: 20px;
    font-size: 0.2rem;
    line-height: 40px;
    color: #fff;
    border-radius: 6px;
  }
}
.aatitle-son {
  margin-top: 20px;
}
.aatitle {
  margin-top: 10px;
}
.gohome {
  font-size: 0.2rem;
  color: #fff;
  text-align: left;
  background: #3451a1;
  width: 0.8rem;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  border-radius: 0.06rem;
  margin-left: 0.2rem;
  margin-top: 0.2rem;
  cursor: pointer;
}
</style>
